<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>lyric-parser test</title>
</head>
<body>
<div>
  <p id="lrc">
  </p>
  <button id="play">play</button>
  <button id="pause">pause</button>
  <button id="stop">stop</button>
  <button id="seek">seek</button>
  <input id="input" value="1000">
</div>
<script src="/assets/lyric.js"></script>
<script>
  var lrc = ["[ti:高尚]", "[ar:薛之谦]", "[al:高尚]", "[by:]", "[offset:0]", "[00:01.35]高尚 - 薛之谦", "[00:03.11]词：薛之谦", "[00:04.34]曲：周以力", "[00:07.55]", "[00:09.18]在阴郁的地方 积攒能量", "[00:15.77]", "[00:18.71]人交出了什么 能变个样", "[00:25.37]", "[00:28.67]奇形怪状 的人在生长", "[00:35.37]", "[00:38.63]我躲在人群中 头在晃", "[00:44.78]", "[00:48.73]刺破我的心脏 样本不算肮脏", "[00:54.45]别恐慌", "[00:57.09]", "[00:58.63]你看我虚荣模样 你该怎么补偿", "[01:04.53]", "[01:07.40]我多高尚 向自尊开了枪", "[01:16.00]", "[01:17.26]你同情的眼光 我特别的欣赏", "[01:22.49]", "[01:23.15]哀而不伤", "[01:26.42]", "[01:27.17]我多慌张 怕人闯入我围墙", "[01:35.62]", "[01:36.88]窥探五官不详 见我原本模样", "[01:42.01]", "[01:42.53]还能 模仿 任何形状", "[01:49.15]", "[02:00.55]越恶劣的情况 越要想象", "[02:07.31]", "[02:10.24]狼藏起反犬旁 像从了良", "[02:17.47]", "[02:20.72]张牙舞爪 的人在散谎", "[02:27.20]", "[02:29.92]愿形容我的词 别太荒唐", "[02:36.26]", "[02:40.88]贪念表现恰当 就像索要嫁妆", "[02:45.90]在情理上", "[02:48.80]", "[02:49.79]请当我孤芳自赏 还规矩条条框框", "[02:57.32]", "[02:59.28]我多高尚 向自尊开了枪", "[03:07.35]", "[03:08.86]你异样的眼光 我特别的欣赏", "[03:14.08]", "[03:14.71]让人难忘", "[03:18.63]我多风光 你别闯入我围墙", "[03:27.12]", "[03:28.33]你要什么真相 不就图个皮囊", "[03:33.42]", "[03:34.07]不如 让我 留在橱窗", "[03:40.09]", "[03:52.49]我多难忘 像秀色可餐的模样", "[04:00.91]", "[04:01.97]感谢你又打赏 你用词越恰当", "[04:07.87]我越膨胀", "[04:11.44]", "[04:11.99]我的疯狂 连我自己都看不上", "[04:20.44]", "[04:21.35]阴里怪气的愿望 那屈辱的轻伤", "[04:27.15]谁能给我 发个奖章", "[04:34.85]", "[04:43.45]我多向往 有个美丽的地方", "[04:52.21]", "[04:53.41]我最初的模样 没痛也不会痒", "[04:59.88]", "[05:00.96]能把赏赐 都烧光", "[05:10.86]制作人：周以力", "[05:11.93]编曲：周以力", "[05:12.73]大提琴：郎莹", "[05:13.53]鼓：尹森", "[05:14.43]贝斯：陈然然", "[05:14.63]吉他：张凇", "[05:14.80]Vocal录音室：江苏广电总台录音室", "[05:15.26]乐器录音室：北京录顶技录音室", "[05:15.72]乐器录音师：王晓海/鲍锐（鼓）", "[05:16.22]混音工程师：鲍锐@录顶技Studio", "[05:16.65]母带工程师：Friedemann Tishmeyer@Hambug Studio"].join('\n')

  document.getElementById('lrc').innerText = lrc

  function $(id) {
    return document.getElementById(id)
  }

  var $input = $('input')
  var $play = $('play')
  var $pause = $('pause')
  var $seek = $('seek')
  var $stop = $('stop')

  $play.addEventListener('click', play)
  $pause.addEventListener('click', pause)
  $seek.addEventListener('click', seek)
  $stop.addEventListener('click', stop)

  var lyric = new window.Lyric(lrc, function (obj) {
    console.log(obj)
  })

  function play() {
    lyric.play()
  }

  function pause() {
    lyric.togglePlay()
  }

  function seek() {
    lyric.seek($input.value)
  }

  function stop() {
    lyric.stop()
  }

</script>
</body>
</html>